<template>
    <div class="swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <template v-for="(item,index) in swipeData">
            <van-swipe-item>
              <img :src="item.url" alt="">
            </van-swipe-item>
          </template>
          <template #indicator="{ active, total }">
              <div class="custom-indicator">
                <template v-for="(value,key,index) in classifyObj" :key="key">
                  <div class="indicator-item" :class="{active:key === value[getCurrentIndex(value,active)]?.title}">
                    <span class="title">{{ getTitle(key) }}&nbsp;</span>
                    <span v-if="key === value[getCurrentIndex(value,active)]?.title">{{ getCurrentIndex(value,active)+1 }}/{{ value.length }}</span>
                  </div>
                </template>
              </div>
            </template>
        </van-swipe>
    </div>
</template>

<script setup>
  import { ref } from "vue"
    const props = defineProps({
      swipeData:{
        type:Array,
        default:() => []
      }
    })


    // 数组分类
    const classifyObj = ref({})
    for (let item of props.swipeData) {
      if (!classifyObj.value[item.title]) {
        classifyObj.value[item.title] =[]
      }
      classifyObj.value[item.title].push(item)
    }
    const getCurrentIndex = (value,active) => {
      const index = value.findIndex(item => item == props.swipeData[active])
      if (index !== -1) {
        return index
      }
    }
    const getTitle = (key) => {
      return key.replace("【","").replace("】：","")
    }
</script>


<style lang='less' scoped>
.swipe {
  .my-swipe {
    position: relative;
    img {
      width: 100%;
    }
    .custom-indicator {
      position: absolute;
      bottom: 4px;
      right: 4px;
      background-color: #333;
      color: #fff;
      font-size: 14px;
      display: flex;
      align-items: center;
      padding: 2px 4px;
      .active {
        padding: 0 4px;
        border-radius: 6px;
        margin: 0 4px;
        background-color: #fff;
        color: #333;
      }
    }
  }
}
</style>